<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <el-form-item label="网体级别">
                        <el-select v-model="queryParams.fttLevel">
                            <el-option label="F1" value="F1"></el-option>
                            <el-option label="F2" value="F2"></el-option>
                            <el-option label="F3" value="F3"></el-option>
                            <el-option label="F4" value="F4"></el-option>
                            <el-option label="F5" value="F5"></el-option>
                            <el-option label="F6" value="F6"></el-option>
                            <el-option label="F7" value="F7"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分红时间">
                                <el-date-picker format='yyyyMMdd' @change="dateFromFormat" v-model="periodDayFrom"  placeholder="分红开始时间"></el-date-picker>至
                                <el-date-picker format='yyyyMMdd' @change="dateToFormat" v-model="periodDayTo"  placeholder="分红结束时间"></el-date-picker>
                            </el-form-item>
                    <el-form-item label="分红状态">
                        <el-select v-model="queryParams.state">
                            <el-option label="等待" value="pending"></el-option>
                            <el-option label="分红成功" value="success"></el-option>
                            <el-option label="分红失败" value="failure"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px;">
            <el-col :span='8'>
            <el-button-group>
                <el-button type="primary" :class="{selectBtn:currSelect == 0}" @click="btn(0)" plain>全部</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 1}" @click="btn(1)" plain>F1</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 2}" @click="btn(2)" plain>F2</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 3}" @click="btn(3)" plain>F3</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 4}" @click="btn(4)" plain>F4</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 5}" @click="btn(5)" plain>F5</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 6}" @click="btn(6)" plain>F6</el-button>
                <el-button type="primary" :class="{selectBtn:currSelect == 7}" @click="btn(7)" plain>F7</el-button>
            </el-button-group>
            </el-col>
            <el-col :span='2'>
                <el-button type="primary" plain icon='el-icon-plus' size='mini' @click='handleAdd'>新增</el-button>
            </el-col>
            <el-col :span='2'>
                <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <Table :list='list' :loading='loading' :tableColumns='tableColumns' :tableOption='tableOption' @clickButton='clickButton' ></Table>
        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getfttprofitsHander"  />
        <!-- 分红明细 -->
        <el-dialog title="分红明细" :visible.sync="openView" width="1100px" append-to-body>
            <el-form ref="form" label-width="120px" size="mini">
                <el-row>
                    <el-col :span="24"><h3>数据统计</h3></el-col>
                </el-row>
                <el-row>
                    <el-col :span="6"><el-form-item label="网体级别：">{{details.fttLevel}}</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="网体名称：">{{details.fttLevelText}}</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="分红日期：">{{details.periodDay}}</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="分红总金额：">{{details.totalMoney}}</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="分红人数：">{{details.userCount}}</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="人均分红：">{{details.perUserMoney}}</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="结算金额：">{{details.settleMoney}}</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="分红状态：">
                        <div v-if="details.state =='pending' ">等待</div>
                        <div v-if="details.state =='failure' ">分红失败</div>
                        <div v-if="details.state =='success' ">分红成功</div>
                    </el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><h3>数据源</h3></el-col>
                </el-row>
                <el-row>
                   <Table :list='list2'  :tableColumns='tableColumns2'  ></Table>
                </el-row>
                <el-row>
                    <el-col :span="24"><h3>分红明细</h3></el-col>
                </el-row>
                <el-row>
                    <Table :list='list3'  :tableColumns='tableColumns3'  ></Table>
                    <pagination  v-show="total3>0"  :total="total3" :page.sync="queryParams3.pageNo" :limit.sync="queryParams3.pageSize" @pagination="getfttuserprofitsListHandle"  />
                </el-row>
            </el-form>
        </el-dialog>
        <el-dialog title="新增" :visible.sync="addDialog" width="600px" append-to-body>
            <el-form  :model="userForm"  label-width="160px">
                <el-form-item label="订单数量" >
                    <el-input v-model="userForm.quantity"  />
                </el-form-item>
                <el-form-item :label="configName" >
                    <div>{{configValue}}</div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="SubmitForm(userForm)">确 定</el-button>
                <el-button @click="fCancel(userForm)">取 消</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>
<script>
import myForm from '@/views/components/myForm'
import Table from '@/views/components/myTable'
import { getfttprofits, fttprofitsExport,getfttuserprofitsList,postCashorder,fttProfitMoney} from '@/api/ka/ka'
export default {
    components:{
        myForm,
        Table
    },
    data() {
        return{
            loading:false,
            exportLoading: false,
            openView:false,
            addDialog:false,
            periodDayFrom:"",
            periodDayTo:'',
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            userForm:{
                quantity:''
            },
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'网体级别',param:'fttLevel'},
                {label:'分红总金额',param:'totalMoney'},
                {label:'分红人数',param:'userCount'},
                {label:'人均分红',param:'perUserMoney'},
                {label:'分红时间',param:'periodDay'},
                {label:'分红状态',param:'state',
                    render:row=>{
                        if(row.state=='pending'){
                            return '等待'
                        }else if(row.state=='success'){
                            return '分红成功'
                        }else if(row.state=='failure'){
                            return '分红失败'
                        }else {
                            return row.state
                        }
                    }
                },
                {label:'创建时间',param:'createdAt',
                    render: row => {
                        if(!row.createdAt){
                            return '-'
                        }
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },

            ],
            list:[],
            tableOption:{
                label:'操作',
                options:[
                    {
                        label:'查看详情',
                        text:'text',
                        icon:'el-icon-view',
                        methods:'handleView'
                    },
                ]
            },
            tableColumns2:[
                {label:'ID',param:'id'},
                {label:'来源订单',param:'a'},
                {label:'订单金额',param:'a'},
                {label:'手机号',param:'a'},
                {label:'入账金额',param:'a'},
                {label:'生效时间',param:'a'},
                {label:'类型',param:'a'},
            ],
            list2:[],
            tableColumns3:[
                {label:'ID',param:'id'},
                {label:'用户手机',param:'cellphone'},
                {label:'分红金额',param:'money'},
                {label:'到账日期',param:'periodDay'},
                {label:'创建时间',param:'createdAt'},
            ],
            list3:[],
            total:0,
            total3:0,
            queryParams3:{
                pageNo: 1,
                pageSize: 10,
            },
            currSelect:0,
            details:{},
            configName:'',
            configValue:'',
            
        }
    },
    created(){
        
        this.getfttprofitsHander()
    },
    methods:{
        clickButton(val){
            this[val.methods](val.row)
        },
        dateHandler(val){
            let d = new Date(val)
            let year = d.getFullYear()+''
            let month = d.getMonth()+1 >= 10 ? ''+ (d.getMonth()+1) : '0' + (d.getMonth()+1) 
            let date = d.getDate() >= 10 ? ''+d.getDate() : '0'+d.getDate()
            return {year,month,date}
        },
        dateFromFormat(val){
            this.queryParams.periodDayFrom = this.dateHandler(val).year+this.dateHandler(val).month+this.dateHandler(val).date
        },
        dateToFormat(val){
            this.queryParams.periodDayTo = this.dateHandler(val).year+this.dateHandler(val).month+this.dateHandler(val).date
        },
        //新增
        handleAdd(){
            this.userForm.quantity = ''
            this.addDialog = true
            fttProfitMoney().then(res=>{
                if(res.code == 200){
                    let details = res.rows[0]
                    this.configName = details.configName
                    this.configValue = JSON.parse(details.configValue)
                }
            })
        },
        //确认
        SubmitForm(val){
            postCashorder({quantity:val.quantity}).then(res=>{
                if(res.code == 200){
                    this.msgSuccess("新增成功");
                    this.getfttprofitsHander()
                    this.addDialog = false
                }
            })
        },
        //取消
        fCancel(val){
            val.quantity = ''
            this.addDialog = false
        },
        //获取数据
        getfttprofitsHander(data){
            data = this.addDateRange(this.queryParams)
            getfttprofits(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //查看详情
        handleView(row){
            this.details = row
            this.openView = true
            this.getfttuserprofitsListHandle()
        },
        getfttuserprofitsListHandle(){
            let data = this.addDateRange(this.queryParams3)
            data.fttLevel = this.details.fttLevel
            data.periodDay = this.details.periodDay
            getfttuserprofitsList(data).then(res=>{
                if(res.data.code == 200){
                    this.list3 = res.data.rows
                    this.total3 = res.data.total
                }
            })
        },
        //搜索
        handleQuery(obj){
            if(this.periodDayFrom == null){
                this.queryParams.periodDayFrom = ''
            }
            if(this.periodDayTo == null){
                this.queryParams.periodDayTo = ''
            }
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getfttprofitsHander()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.searchReset()
            this.handleQuery();
        },
        //清空搜索条件
        searchReset(){
            this.periodDayFrom = ''
            this.periodDayTo = ''
            this.queryParams.pageNo = 1
            this.queryParams.pageSize = 10
            this.queryParams.periodDayFrom = undefined
            this.queryParams.periodDayTo = undefined
            this.queryParams.state = undefined
            this.queryParams.fttLevel = undefined
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出所有分红数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return fttprofitsExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        },
        //切换
        btn(val){
            let data = this.addDateRange(this.queryParams)
            if(val == 0){
                this.currSelect = 0
                delete data.fttLevel
            }else if(val == 1){
                this.currSelect = 1
                data.fttLevel = 'F1'
            }else if(val == 2){
                this.currSelect = 2
                data.fttLevel = 'F2'
            }else if(val == 3){
                this.currSelect = 3
                data.fttLevel = 'F3'
            }else if(val == 4){
                this.currSelect = 4
                data.fttLevel = 'F4'
            }else if(val == 5){
                this.currSelect = 5
                data.fttLevel = 'F5'
            }else if(val == 6){
                this.currSelect = 6
                data.fttLevel = 'F6'
            }else if(val == 7){
                this.currSelect = 7
                data.fttLevel = 'F7'
            }
            this.getfttprofitsHander(data)
            
        }
    }
}
</script>
<style scoped>
.selectBtn {
    background:#1890ff;
    color:#fff;
}
</style>
